<template>
    <div>
        <h1>车位列表</h1>
        <div class="searchParking">
            <el-select
                v-model="mySearchData.options"
                placeholder="选择搜索类型"
                class="searchSelectWidth"
            >
                <el-option value="address" label="地址"> </el-option>
                <el-option value="price" label="价格"> </el-option>
                <el-option value="cycle" label="出租时间 "> </el-option>
            </el-select>
            <el-input
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="mySearchData.search_data"
                class="inputWidth"
            >
            </el-input>
            <el-button
                type="primary"
                icon="el-icon-search"
                @click="myChangeSearchData(mySearchData)"
                >搜索</el-button
            >
        </div>
        <el-table
            :data="parkingsData.data"
            border
            style="width: 100%"
            v-loading="loading"
            element-loading-text="闭嘴，别催"
        >
            <el-table-column label="车位地址" width="180">
                <template slot-scope="scope">
                    <el-input
                        v-if="
                            changeInput && currentChangeInput == scope.row._id
                        "
                        v-model="scope.row.address"
                    ></el-input>
                    <span v-else>{{ scope.row.address }}</span>
                </template>
            </el-table-column>
            <el-table-column label="车位号" width="180">
                <template slot-scope="scope">
                    <el-input
                        v-if="
                            changeInput && currentChangeInput == scope.row._id
                        "
                        v-model="scope.row.number"
                    ></el-input>
                    <span v-else>{{ scope.row.number }}</span>
                </template>
            </el-table-column>
            <el-table-column label="车位产权信息">
                <template slot-scope="scope">
                    <el-input
                        v-if="
                            changeInput && currentChangeInput == scope.row._id
                        "
                        v-model="scope.row.property"
                    ></el-input>
                    <span v-else>{{ scope.row.property }}</span>
                </template>
            </el-table-column>

            <el-table-column label="出租时间">
                <template slot-scope="scope">
                    <el-input
                        v-if="
                            changeInput && currentChangeInput == scope.row._id
                        "
                        v-model="scope.row.cycle"
                    ></el-input>
                    <span v-else>{{ scope.row.cycle }}</span>
                </template>
            </el-table-column>
            <el-table-column label="出租价格(每月)">
                <template slot-scope="scope">
                    <el-input
                        v-if="
                            changeInput && currentChangeInput == scope.row._id
                        "
                        v-model="scope.row.price"
                    ></el-input>
                    <span v-else>{{ scope.row.price }}</span>
                </template>
            </el-table-column>
            <el-table-column label="车主联系方式">
                <template slot-scope="scope">
                    <el-input
                        v-if="
                            changeInput && currentChangeInput == scope.row._id
                        "
                        v-model="scope.row.telephone"
                    ></el-input>
                    <span v-else>{{ scope.row.telephone }}</span>
                </template>
            </el-table-column>
            <el-table-column label="上架/下架">
                <template slot-scope="scope">
                    <template v-if="scope.row.state == 1">
                        <span>未审核</span>
                        <el-button
                            size="mini"
                            @click="
                                myamendState(scope.row._id, scope.row.state)
                            "
                            >审核</el-button
                        >
                    </template>
                    <template v-else-if="scope.row.state == 2">
                        <span>审核通过</span>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="
                                myamendState(scope.row._id, scope.row.state)
                            "
                            >上架</el-button
                        >
                    </template>
                    <template v-else-if="scope.row.state == 3">
                        <span>审核未通过</span>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="
                                myamendState(scope.row._id, scope.row.state)
                            "
                            >审核</el-button
                        >
                    </template>
                    <template v-else-if="scope.row.state == 4">
                        <span>已上架</span>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="
                                myamendState(scope.row._id, scope.row.state)
                            "
                            >下架</el-button
                        >
                    </template>
                    <template v-else-if="scope.row.state == 5">
                        <span>已出租</span>
                    </template>
                    <template v-else-if="scope.row.state == 6">
                        <span>审核中</span>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        type="primary"
                        icon="el-icon-edit"
                        @click="myModifyParkings(scope.row._id)"
                        circle
                    ></el-button>

                    <el-button
                        type="success"
                        icon="el-icon-check"
                        @click="myConfrimModifyParking(scope.row)"
                        circle
                    ></el-button>
                </template>
            </el-table-column>
            <el-table-column label="删除">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="danger"
                        @click="myDeleteParkings(scope.row._id)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="parkingsData.currentPage"
            :page-sizes="[3, 4, 5, 6]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="parkingsData.totalNum"
        >
        </el-pagination>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const {
    mapState,
    mapMutations,
    mapGetters,
    mapActions,
} = createNamespacedHelpers("parkings");
export default {
    data() {
        return {
            mySearchData: {
                options: "address",
                search_data: "",
            },
            changeInput: false,
            currentChangeInput: "",
        };
    },
    computed: {
        ...mapState(["parkingsData", "pageSize", "searchData", "loading"]),
    },
    mounted() {
        this.getParkings();
    },
    watch: {
        // "parkingsData.currentPage"() {
        //     this.getParkings();
        // },
        // parkingsData: {
        //     handler(val) {
        //         // this.getParkings();
        //     },
        //     deep: true,
        // },parkingsData.currentPage
        "parkingsData.currentPage"() {
            this.getParkings();
        },
        pageSize() {
            this.getParkings();
        },
        searchData() {
            this.getParkings();
        },
    },
    methods: {
        ...mapMutations([
            "changCurrentPage",
            "changePageSize",
            "changeSearchData",
            "",
        ]),
        ...mapActions([
            "getParkings",
            "deleteParkings",
            "modifyParkings",
            "amendState",
            "checkCanChangeModify",
        ]),
        //设置每页多少条
        handleSizeChange(val) {
            this.changePageSize(val);
        },

        //翻页方法
        handleCurrentChange(val) {
            this.changCurrentPage(val);
        },

        //搜索按钮
        myChangeSearchData(val) {
            this.changeSearchData(val);
            this.mySearchData.search_data = "";
        },

        //改变上下架 冰
        myamendState(_id, state) {
            const val = {
                _id,
                state,
            };
            this.amendState(val);
            this.getParkings();
        },

        //修改按钮
        async myModifyParkings(val) {
            const data = await this.checkCanChangeModify(val);
            if (data.status) {
                this.$message(data.message);
                this.changeInput = true;
                this.currentChangeInput = val;
                this.modifyParkings(val);
            } else {
                this.$message({
                    type: "error",
                    message: data.message,
                });
            }
        },

        // 确认修改按钮
        async myConfrimModifyParking(val) {
            this.changeInput = false;
            const { data } = await this.modifyParkings(val);
            if (data.status) {
                this.$message({
                    type: "success",
                    message: data.message,
                });
            } else {
                this.$message({
                    type: "error",
                    message: data.message,
                });
            }
        },

        //本页删除按钮还有多余的操作this.deleteParkings(val);
        myDeleteParkings(val) {
            // 在创建 Confirm 组件之后，返回一个 Promise。
            // 当用户点击确定或者取消按钮时改变这个 Promise 实例的状态。
            this.$confirm("你确认你要删除此车位吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const data = await this.deleteParkings(val);
                    if (data.status) {
                        this.$message({
                            type: "success",
                            message: data.message,
                        });
                    } else {
                        this.$message({
                            type: "error",
                            message: data.message,
                        });
                    }
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
    },
};
</script>
<style lang="scss">
.inputWidth {
    width: 20%;
    margin: 0 5px;
}
.searchParking {
    margin-bottom: 30px;
}
.searchSelectWidth {
    width: 8%;
}
</style>